<template>
  <div>
    <div id="mychart" style=" height:500px"></div>
  </div>
</template>

<script>
var echarts = require('echarts')
export default {
  data () {
    return {
      get_testdata: null
    }
  },
  methods: {},
  props: ['mytest_data'],
  watch: {
    mytest_data (newVule) {
      this.get_testdata = newVule
      console.log(this.get_testdata)
    },
    deep: true,
    immediate: true
  },
  mounted () {
    // this.$nextTick(function () {
    //   // Code that will run only after the
    //   // entire view has been rendered
    //   console.log(this.get_testdata)
    // })
    this.get_testdata = this.mytest_data
    console.log(this.get_testdata)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mychart'))
    myChart.showLoading({
      text: '加载中。。。。',
      color: '#000',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0
    })

    window.addEventListener('resize', function () {
      /// /图表响应式
      myChart.resize()
    })
    // 绘制柱形图表
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['蒸发量', '降水量', '平均温度']
      },
      xAxis: [
        {
          type: 'category',
          data: this.get_testdata.data.month,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '水量',
          min: 0,
          max:
            50 *
            (Math.floor(
              Math.max.apply(null, this.get_testdata.data.rain.data) / 50
            ) +
              2), // 计算左边坐标最大值，保证比柱形高
          interval: 50,
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max:
            5 *
            (Math.floor(
              Math.max.apply(null, this.get_testdata.data.temp.data) / 5
            ) +
              2), // 计算右边坐标最大值，保证比柱形高
          interval: 5,
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          data: this.get_testdata.data.evap.data
        },
        {
          name: '降水量',
          type: 'bar',
          data: this.get_testdata.data.rain.data
        },
        {
          name: '平均温度',
          type: 'line',
          yAxisIndex: 1,
          data: this.get_testdata.data.temp.data
        }
      ]
    }

    myChart.setOption(option)
    myChart.hideLoading()
  }
}
</script>

<style lang="less">
</style>
